<template>
  <div id="comMess">
    <el-container style="height: 100vh; border: 1px">
      <el-header>
        <el-row>
          <el-col :span="2"
            ><div class="grid-content bg-purple">聘途</div></el-col
          >
          <el-col :span="2" :offset="20"
            ><div class="grid-content bg-purple">
              <el-button
                style="font-size: large; color: black"
                type="text"
                @click="Loginout"
                >退出登录</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <Sidebar></Sidebar>
        </el-aside>
        <el-main>
          <!-- 主体内容 -->
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            style="width: 600px; margin-left: 20%; margin-top: 100px"
          >
            <!-- 公司名称 -->
            <el-form-item label="公司名称" style="font-weight: bolder">
              <el-input style="width: 300px" v-model="form.cname"></el-input>
            </el-form-item>
            <!-- 公司地址 -->
            <el-form-item label="公司地址" style="font-weight: bolder">
              <el-input style="width: 300px" v-model="form.caddress"></el-input>
            </el-form-item>
            <!-- 公司邮箱 -->
            <el-form-item label="公司邮箱" style="font-weight: bolder">
              <el-input style="width: 300px" v-model="form.cemail"></el-input>
            </el-form-item>
            <!-- 公司电话 -->
            <el-form-item label="公司电话" style="font-weight: bolder">
              <el-input style="width: 300px" v-model="form.cphone"></el-input>
            </el-form-item>
            <!-- 创立年份 -->
            <el-form-item label="创立年份" style="font-weight: bolder">
              <el-select v-model="form.selectedYear" placeholder="请选择年份">
                <el-option
                  v-for="year in form.years"
                  :key="year"
                  :label="year"
                  :value="year"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 公司介绍 -->
            <el-form-item label="公司介绍" style="font-weight: bolder">
              <textarea
                style="width: 530px; height: 200px; font-size: larger"
                v-model="form.desc"
              ></textarea>
            </el-form-item>
            <!-- 修改 -->
            <el-form-item>
              <el-button type="primary" @click="update">修改信息</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import axios from "axios";
import Sidebar from "@/components/CompanySidebar.vue";
import { EventBus } from '@/util/event-bus.js';
export default {
  components: {
    Sidebar,
  },
  created() {
    this.generateYearOptions(); // 生成年份选项
    this.fetchData();
  },
  data() {
    return {
      CompanyUserData: JSON.parse(sessionStorage.getItem("CompanyUser")),
      form: {
        years: [], // 年份选项列表
        selectedYear: "", // 绑定的值
        cname: "",
        caddress: "",
        cphone: "",
        cemail: "",
        desc: "",
      },
    };
  },
  methods: {
    closeWebSocket() {
      EventBus.$emit('close-websocket-company');
    },
    generateYearOptions() {
      const startYear = 1900;
      const endYear = 2050;
      this.form.years = [];
      for (let year = startYear; year <= endYear; year++) {
        this.form.years.push(year.toString()); // 将年份转换为字符串
      }
    },
    fetchData() {
      this.form.cname = this.CompanyUserData.cname;
      this.form.selectedYear = this.CompanyUserData.cyear;
      this.form.caddress = this.CompanyUserData.caddress;
      this.form.cemail = this.CompanyUserData.cemail;
      this.form.cphone = this.CompanyUserData.cphone;
      this.fetchFileContent();
    },
    fetchFileContent() {
      // 使用 Axios 从后端获取文件内容
      let data = new FormData();
      //改动2
      data.append("cinfo", this.CompanyUserData.cinfo);
      //改动3
      axios
        .post("http://localhost:8080/hqdx/company/showCompanyProfile", data)
        .then((response) => {
          this.form.desc = response.data.data.items; // 更新Vue实例的数据
        })
        .catch((error) => {
          console.error("Error fetching file content:", error);
        });
    },
    update() {
      let data3 = new FormData();
      data3.append("cusername", this.CompanyUserData.cusername);
      data3.append("cname", this.form.cname);
      data3.append("caddress", this.form.caddress);
      data3.append("cemail", this.form.cemail);
      data3.append("cphone", this.form.cphone);
      data3.append("cyear", this.form.selectedYear);
      data3.append("cv", this.form.desc);
      axios
        .post("http://localhost:8080/hqdx/company/updateComMessage", data3)
        .then((response) => {
          if (response.data.message === "更改成功") {
            sessionStorage.setItem(
              "CompanyUser",
              JSON.stringify(response.data.data.items)
            );
            this.CompanyUserData = JSON.parse(
              sessionStorage.getItem("CompanyUser")
            );
            this.fetchData();
            alert("信息更新成功！");
          } else {
            alert("response.data.message");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    Loginout(){
      this.closeWebSocket();
      let data = new FormData();
      data.append("cusername", this.CompanyUserData.cusername);
      axios
        .post("http://localhost:8080/hqdx/company/loginout", data)
        .then((response) => {})
        .catch((error) => {
          console.log(error);
        });
      this.$router.push('/login');
      sessionStorage.setItem('LoginComState', JSON.stringify(false));//退出登录，状态记录
    }
  },
};
</script>

  
  <style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background: linear-gradient(to right, #ffffff, #e0f7fa);
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  line-height: 160px;
}

/* 不清楚作用 */
body > .el-container {
  margin-bottom: 40px;
}
</style>